<!--
 * @Author: 小花
 * @Date: 2022-03-28 18:40:05
 * @LastEditors: 小花
 * @LastEditTime: 2022-04-26 13:19:02
 * @Description: 订单完结
-->
<template>
  <div class='orderCompleted_container'>
    <el-divider content-position="left">订单完结</el-divider>

    <div style="display: block;text-align: right;">
      <el-button type="primary" :disabled="setDisabled()" @click="completedOrder">完结订单
      </el-button>
    </div>

    <el-descriptions class="descriptionsStyle" :column="3" size="small" border
      v-loading="tableDataLoading" element-loading-text="拼命加载中" v-for="(item , idx) in tableData"
      :key="idx">
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-s-order"></i>
          订单单号
        </template>
        {{item.orderId}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-s-order"></i>
          申报单号
        </template>
        {{item.applyId}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-s-order"></i>
          材料编号
        </template>
        {{item.materialId}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-tickets"></i>
          材料名称
        </template>
        {{item.materialLibraryEntity.materialName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="fa fa-jpy"></i>
          材料单价
        </template>
        {{ item.materialPrice }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-pie-chart"></i>
          申报数量
        </template>
        {{item.takeAmount}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="fa fa-jpy"></i>
          总计金额
        </template>
        <span style="color: #f56c6c;font-weight: bold;">
          {{(item.materialPrice*item.takeAmount).toFixed(1)}}
        </span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="fa fa-calendar"></i>
          申报时间
        </template>
        {{ item.applyTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="fa fa-spinner"></i>
          申报状态
        </template>
        <el-tag size="small" :type="['danger','success'].at(item.applyStatus)" effect="plain">
          {{ [ '未完成', '已完成' ].at(item.applyStatus) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="fa fa-spinner"></i>
          收费状态
        </template>
        <el-tag size="small" :type="['danger', 'success' ].at(item.chargeOn)" effect="plain">
          {{ [ '未开启', '已开启' ].at(item.chargeOn) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="fa fa-spinner"></i>
          缴纳状态
        </template>
        <el-tag size="small" :type="[ 'danger', 'success' ].at(item.chargeStatus)" effect="plain">
          {{ [ '未缴费', '已缴费' ].at(item.chargeStatus) }}
        </el-tag>
      </el-descriptions-item>

    </el-descriptions>
  </div>
</template>

<script>
import { useMainStore } from '@/js/store.js'
import { createOrderDetailsStep } from '@/js/public.js'

export default {
  data () {
    //这里存放数据
    return {
      store: useMainStore(),
      tableData: [],
      tableDataLoading: true,
    }
  },
  methods: {
    setDisabled () {
      let tableData = this.tableData;
      for (let i = 0; i < tableData.length; i++) {
        const element = tableData[i];
        if (element.chargeOn && !element.chargeStatus) {
          return true;
        }
      }
      return false;
    },
    completedOrder () {
      if (this.setDisabled()) {
        this.$message.error("订单未完结");
        return;
      }
      if (this.tableData.length !== 0) {
        this.axios.post("/workerHome/completedOrder", this.tableData).then(res => {
          if (res.data.code != 43000) {
            this.$message.error(res.data.msg);
            return;
          }
          this.$message.success(res.data.msg);
          this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
        })
      } else {
        // 未申报材料情况处理
        this.axios.post("/workerHome/completedOrderIsNotApplyMaterial", this.store.recordDetails.data).then(res => {
          this.$message.success(res.data.msg);
          this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
        })
      }
    },
    queryOrderCompletedInfo () {
      let orderId = this.store.recordDetails.data.orderId;
      this.axios.get("/workerHome/queryOrderCompletedInfo", { params: { orderId } }).then(res => {
        if (res.data.code != 43000) {
          this.$message.error(res.data.msg);
          return;
        }
        this.tableData = res.data.data;
        this.tableDataLoading = false;
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

    this.queryOrderCompletedInfo();
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.orderCompleted_container {
  .descriptionsStyle {
    margin-top: 1rem;
  }
}
</style>
